import { View } from "@tarojs/components";
import { ReactNode } from "react";
import { twMerge } from "tailwind-merge";

type StickyProps = {
  position?: "bottom" | "top";

  className?: string;

  footerSafe?: boolean;

  children?: ReactNode;
};

export default ({
  className,
  footerSafe,
  position = "bottom",
  children,
}: StickyProps) => {
  return (
    <View
      className={twMerge(
        "sticky bottom-0 w-full",
        position == "bottom" ? "bottom-0" : "top-0",
        className
      )}
    >
      {children}

      {footerSafe && <View className="safe-footer" />}
    </View>
  );
};
